import React, { useState } from 'react';
import HistoryTabCard from '@/components/HistoryTabCard';
import { Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import RatingMgtModal from '../../components/ScoreModal/RatingMgtModal';
import WaitForStart from './components/WaitForStart';
import { moveToLaunch } from '../../services/score';
import { modalTypes } from '../../components/ScoreModal/modalTypes';
import AlreadyStart from './components/AlreadyStart';
import NoScore from './components/NoScore';
import styles from './index.less';

const Score = ({ location }) => {
    const { query } = location;
    const [startList, setStartList] = useState([]);
    const [noScoreList, setNoScoreList] = useState([]);
    const tabList = [
        { key: 'tab1', tab: '待发起' },
        { key: 'tab2', tab: '已发起' },
        { key: 'tab3', tab: '无需评分' }
    ];
    const { currTab = tabList[0].key } = query;

    const RatingMgtModalRef = React.useRef();

    const WaitForStarRef = React.useRef();
    const NoScoreRef = React.useRef();

    const handleSubmit = () => {
        if (currTab === tabList[0].key) {
            setStartList([]);
            WaitForStarRef.current.updateTableData();
        }
        if (currTab === tabList[2].key) {
            setNoScoreList([]);
            NoScoreRef.current.updateTableData();
        }
    };

    const extraButtons = (
        <div className={styles.batchButton}>
            {currTab === tabList[0].key && (
                <>
                    <Button
                        type="primary"
                        onClick={() => RatingMgtModalRef.current.handleLaunch(startList, modalTypes.BATCH_START.key)}
                    >
                        批量发起评分
                    </Button>
                    <Button
                        type="primary"
                        onClick={() =>
                            RatingMgtModalRef.current.moveToNoScore(startList, modalTypes.BATCH_NO_SCORE.key)
                        }
                    >
                        批量无需评分
                    </Button>
                </>
            )}
            {currTab === tabList[2].key && (
                <Button
                    type="primary"
                    onClick={() => RatingMgtModalRef.current.moveToBeScored(noScoreList, modalTypes.BATCH_MOVE.key)}
                >
                    批量移回待发起
                </Button>
            )}
        </div>
    );
    return (
        <PageHeaderWrapper>
            <HistoryTabCard bordered={false} tabList={tabList} tabBarExtraContent={extraButtons}>
                <WaitForStart setStartList={setStartList} startList={startList} WaitForStarRef={WaitForStarRef} />
                <AlreadyStart />
                <NoScore
                    setNoScoreList={setNoScoreList}
                    noScoreList={noScoreList}
                    handleModalOk={moveToLaunch}
                    NoScoreRef={NoScoreRef}
                />
            </HistoryTabCard>
            <RatingMgtModal RatingMgtModalRef={RatingMgtModalRef} onSuccess={() => handleSubmit()} />
        </PageHeaderWrapper>
    );
};

export default Score;
